<template>
    <view class="library-category-content">
        <view class="category-List">
            <view
                v-for="item in firstCategories"
                :key="item.id"
                class="list-item"
                :class="{ active: activeFirstCategory === item.id }"
                @click="handleFirstCategoryClick(item.id)"
            >
                {{ item.name }}
            </view>
        </view>

        <view class="category-content">
            <view class="second-category-List">
                <view
                    v-for="item in secondCategories"
                    :key="item.id"
                    class="list-item"
                    :class="{ active: activeSecondCategory === item.id }"
                    @click="handleSecondCategoryClick(item.id)"
                >
                    {{ item.name }}
                </view>
            </view>

            <view class="content-card">
                <view class="card-title"
                    >{{ activeSecondCategoryName }}精选</view
                >

                <!-- 帖子列表 -->
                <view class="card-list">
                    <view
                        v-for="post in posts"
                        :key="post.id"
                        class="list-item"
                        @click="navigatorToCultyreLibraryView(post.id)"
                    >
                        <!-- 图片 -->
                        <view class="item-image">
                            <image class="image" :src="post.image"></image>
                        </view>

                        <!-- 信息 -->
                        <view class="image-info">
                            <view class="title">{{ post.title }}</view>
                            <view class="desc">{{ post.desc }}</view>
                            <!-- 用户信息 -->
                            <view class="user-info">
                                <view class="user-avatar">
                                    <image
                                        class="avatar"
                                        :src="post.avatar"
                                    ></image>
                                </view>
                                <text class="user-name">{{
                                    post.username
                                }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 假数据
const firstCategories = ref([
    { id: 1, name: '汉服形制' },
    { id: 2, name: '汉服工艺' },
    { id: 3, name: '历史演变' }
]);

const secondCategoriesData = {
    1: [
        { id: 101, name: '齐胸襦裙' },
        { id: 102, name: '马面裙' },
        { id: 103, name: '道袍' },
        { id: 104, name: '曲裾' }
    ],
    2: [
        { id: 201, name: '刺绣工艺' },
        { id: 202, name: '织金工艺' },
        { id: 203, name: '缂丝工艺' }
    ],
    3: [
        { id: 301, name: '秦汉服饰' },
        { id: 302, name: '唐宋服饰' },
        { id: 303, name: '明清服饰' }
    ]
};

const postsData = {
    101: [
        {
            id: 1001,
            title: '唐风齐胸襦裙·花朝月夕~长文本测试',
            desc: '这款齐胸襦裙采用真丝材质，绣有牡丹与蝴蝶图案，长文本测试···',
            image: 'https://n.sinaimg.cn/sinakd20120/586/w1280h1706/20220808/a3a2-d2ae218078bdea8ef03d625eb7811392.jpg',
            avatar: 'https://randomuser.me/api/portraits/women/23.jpg',
            username: '汉服设计师·云裳汉服设计师·云裳'
        },
        {
            id: 1002,
            title: '清新齐胸襦裙·夏荷',
            desc: '淡绿色调搭配荷花图案，夏日穿着清爽宜人',
            image: 'https://n.sinaimg.cn/sinacn10107/793/w1065h1328/20200222/2950-ipvnsze6130300.jpg',
            avatar: 'https://randomuser.me/api/portraits/women/45.jpg',
            username: '传统工艺师·锦瑟'
        }
    ],
    102: [
        {
            id: 2001,
            title: '明制织金马面裙·锦绣山河',
            desc: '此款马面裙采用传统织金工艺，裙摆绣有山河云纹',
            image: 'https://n.sinaimg.cn/sinakd20120/586/w1280h1706/20220808/2012-f6e2024bbe3736e82fc8618e45212867.jpg',
            avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
            username: '文化传承人·墨染'
        }
    ]
    // 其他分类的假数据...
};

// 状态管理
const activeFirstCategory = ref(1);
const activeSecondCategory = ref(101);

// 计算属性
const secondCategories = computed(() => {
    return secondCategoriesData[activeFirstCategory.value] || [];
});

const posts = computed(() => {
    return postsData[activeSecondCategory.value] || [];
});

// 更改二级分类
const activeSecondCategoryName = computed(() => {
    const category = secondCategories.value.find(
        (item) => item.id === activeSecondCategory.value
    );
    return category ? category.name : '';
});

// 事件处理
const handleFirstCategoryClick = (id) => {
    activeFirstCategory.value = id;
    // 默认选择该分类下的第一个二级分类
    if (secondCategories.value.length > 0) {
        activeSecondCategory.value = secondCategories.value[0].id;
    }
};

const handleSecondCategoryClick = (id) => {
    activeSecondCategory.value = id;
};

// 跳转文章视图页
const navigatorToCultyreLibraryView = () => {
    uni.navigateTo({
        url: '/pages/han_culture_library/subpages/cultyre_library_view/cultyreLibraryView'
    });
};
</script>

<style scoped lang="scss">
.library-category-content {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .category-List {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid $han-global-border-color;
        background-color: $han-global-bg-color;
        padding: 0 20rpx;

        .list-item {
            padding: 10rpx 0;
            margin: 10rpx 20rpx;
            text-align: center;
            font-size: $han-font-size-md;
            color: $han-global-primary-font-color;
            position: relative;

            &.active {
                font-weight: bold;
                border-bottom: 4rpx solid $han-primary-color;
            }
        }
    }

    .category-content {
        display: flex;
        flex: 1;
        overflow: hidden;

        .second-category-List {
            display: flex;
            flex-direction: column;
            border-right: 1rpx solid $han-global-border-color;
            width: 20%;
            background-color: $han-global-bg-color;
            overflow-y: auto;

            .list-item {
                padding: 20rpx;
                text-align: center;
                font-size: $han-font-size-sm;
                border-bottom: 1rpx solid $han-global-border-color;
                transition: all 0.3s;

                &.active {
                    background-color: $han-primary-color;
                    color: white;
                    font-weight: bold;
                }
            }
        }

        .content-card {
            flex: 1;
            overflow-y: auto;
            padding: 10rpx;

            .card-title {
                font-size: $han-font-size-lg;
                font-weight: bold;
                margin-bottom: 20rpx;
                padding-left: 10rpx;
            }

            .card-list {
                .list-item {
                    display: flex;
                    margin: 20rpx 10rpx;
                    border-radius: $han-border-radius-md;
                    border: 1rpx solid $han-global-border-color;
                    overflow: hidden;
                    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
                    transition: all 0.3s;
                    height: 230rpx;

                    .item-image {
                        width: 230rpx;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                        flex-shrink: 0;

                        .image {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: $han-border-radius-md;
                            overflow: hidden;
                        }
                    }

                    .image-info {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        padding: 10rpx;
                        min-width: 0;

                        .title {
                            font-size: $han-font-size-md;
                            font-weight: bold;
                            margin-bottom: 15rpx;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            width: 100%;
                        }

                        .desc {
                            font-size: $han-font-size-sm;
                            color: $han-global-secondary-font-color;
                            margin-bottom: 15rpx;
                            line-height: 1.5;
                            min-height: 0;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .user-info {
                            display: flex;
                            align-items: center;
                            margin-top: auto;

                            .user-avatar {
                                width: 50rpx;
                                height: 50rpx;
                                border-radius: 50%;
                                overflow: hidden;
                                margin-right: 15rpx;

                                .avatar {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }

                            .user-name {
                                font-size: $han-font-size-sm;
                                color: $han-global-secondary-font-color;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
